<template>
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media" v-for="item in newsList" v-bind:key="item.id">
      <router-link :to="'/home/newsinfo/' + item.id">
        <img class="mui-media-object mui-pull-left" :src="item.img_url" />
        <div class="mui-media-body">
          <h1>{{ item.title }}</h1>
          <p class="mui-ellipsis">
            <span>发表时间：{{ item.add_time | dateFormat}}</span>
            <span>点击:{{ item.click }}</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      newsList: [],
    };
  },

  created(){
      this.getNewsList()
  },

  methods: {
    getNewsList() {
      var _this = this;
      _this.$http
        .get("http://api.cms.liulongbin.top/api/getnewslist")
        .then(function (res) {
          if (res.data.status === 0) {
            _this.newsList = res.data.message;
          } else {
            Toast("加载新闻列表失败");
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.mui-media-body {
    h1{
 font-size: 14px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
    }
 

  .mui-ellipsis {
    font-size: 12px;
    color: #26a2cc;
    letter-spacing: -1px;
    display: flex;
    justify-content: space-between;
  }
}

.mui-media-object {
  height: 40px;
}
</style>